<style lang='scss'>
@import "@/assets/css/variable";
.myMerchant {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: $main-bgc;
  min-height: 100%;
  font-size: 1.2rem;
  overflow: auto;
  box-sizing: border-box;
  .header-box {
    border-bottom: 1px solid $border-c;
    background-color: white;
    padding: 1rem 1.7rem;
    .title {
      font-size: 1.6rem;
    }
  }
  .title{
	  font-size: 1.4rem;
	  height: 46px;
	  line-height: 46px;
	  text-align: center;
	  font-weight: bold;
  }
  .list-box {
    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 1rem;
      border-bottom: 1px solid $border-c;
      background-color: white;
	  color:$color-subtitle;
	  line-height: 1.2em;
	  .name{
		  flex: 1;
	  }
	  .mobile{
		  flex: 1;
		  a{
			  color:var(--theme_color)
		  }
	  }
	  .button {
	    margin-left: 5px;
	    border-radius: 8px;
		text-decoration: underline;
	  }
    }
  }
  .add-box {
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
.van-pagination__item--active{
	background-color: var(--theme_color) !important;
}
</style>
<template>
  <div class="myMerchant padding-all-m" :style="{ '--theme_color': getMasterColor }">
    <BarNav></BarNav>
	<van-list
	  v-model="loading"
	  :finished="finished"
	  finished-text="没有更多了"
	  offset="100"
	  @load="getListPage"
	>
    <div class="list-box border-r-l margT-l" v-if="list && list.length > 0">
      <div class="item" v-for="(item, index) in list" :key="index">
        <div>
			<van-image
			  round
			  width="7rem"
			  height="7rem"
			  :src="item.door_header || item.avatar"
			/>
		</div>
        <div class="margL-l">
        	<div class="name">商户名称：{{ item.name }}</div>
        	<div class="mobile margT-s">
        	  联系方式：<a :href="`tel:${item.mobile}`">{{ item.mobile }}</a>
        	</div>
        	<div class="margT-s">会员到期时间：{{item.vip_time}}</div>
        	<div class="margT-s">所在地址：{{`${item.province} - ${item.city} - ${item.area}`}}</div>
        </div>
      </div>
	  <!-- <div class="margT-l">
	  	<van-pagination v-model="pageNo" :total-items="totalItems" :items-per-page="pageSize"/>
	  </div> -->
    </div>
	<div v-else>
		<van-empty description="暂无数据" />
	</div>
	</van-list>
  </div>
</template>

<script>
import { Button, Icon, Toast, Dialog } from "vant";
import QRCode from "qrcode";
import BarNav from "@/components/BarNav"
import { mapGetters, mapState } from 'vuex'
export default {
  name: "StaffManage",
  components: {
    [Icon.name]: Icon,
    [Button.name]: Button,
    [Dialog.name]: Dialog,
    BarNav
  },
  data() {
    return {
      toUrl: "",
      userInfo: "",
	  loading:false,
	  finished:false,
      list: [],
      pageNo: 1,
      pageSize: 10,
	  totalItems:0,
	  showPop:false,
	  
	  item:{}
    };
  },
  computed:{
      ...mapGetters(['getMasterColor']),
      ...mapState(['promoterItema'])
  },
  mounted() {
    this.userInfo = this.$store.state.userInfo;
    if (!this.userInfo.id) {
      this.$router.replace("promoter");
    }
    this.getListPage();
    // this.$nextTick(() => {
    //   this.createQrcode();
    // }, 500);
  },
  methods: {
    lookClick(item) {
      console.log(item);
	  this.item = item
      // this.showPop = true
    },
    refreshList() {
      this.getListPage();
    },
    getListPage() {
		const _this = this
      let toast = Toast.loading({
        forbidClick: true,
        message: "加载中...",
      });
      let params = {
        promoter_id: this.promoterItema.id,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      };
	  this.loading = true;
      this.$request.getMerchantList(params).then((res) => {
        if(res.ret == 200) {
			 const list = res.data.data;
			 this.list.push(...list)
			this.pageNo = res.data.pageNo
			this.totalItems = res.data.totalCount
			toast.clear();
			if (this.list.length >= this.totalItems) {
			  this.finished = true;
			} else {
			  this.pageNo++;
			}
		}
      }).finally(() => {
		  this.loading = false;
		});
    },
    createQrcode() {
      let href = `${location.protocol}//${location.hostname}${
        location.href.indexOf("addons") > -1
          ? "/addons/youmi_activitys/public"
          : ""
      }/mobile/index.html#/my?merchant_id=${this.userInfo.id}`;
      let canvas = document.getElementById("qrCode-canvas");
      QRCode.toCanvas(canvas, href, (error) => {
        if (error) {
          console.log(error);
        } else {
          canvas.style.width = "12rem";
          canvas.style.height = "12rem";
        }
      });
    },
  },
};
</script>